CanvasRenderingContext2D.prototype.strokeCircle = function(x, y, r) {
    this.beginPath();
    this.arc(x, y , r, 0, Math.PI*2, true);
    this.closePath();
    this.stroke();
  };

CanvasRenderingContext2D.prototype.fillCircle = function(x, y, r) {
    this.beginPath();
    this.arc(x, y , r, 0, Math.PI*2, true);
    this.closePath();
    this.fill();
  };

CanvasRenderingContext2D.prototype.drawLine = function(fx, fy, tx, ty) {
  this.beginPath();
  this.moveTo(fx, fy);
  this.lineTo(tx, ty);
  this.closePath();
  this.stroke();
};

CanvasRenderingContext2D.prototype.drawArrow = function(fx, fy, tx, ty) {
    var dx = tx - fx;
    var dy = ty - fy;
    var length = Math.sqrt(dx * dx + dy * dy);
    var angle = Math.acos(dy / length) * (dx < 0 ? -1 : 1);
    var p1x = tx - 0.3 * length * Math.sin(angle + 0.5);
    var p1y = ty - 0.3 * length * Math.cos(angle + 0.5);
    var p2x = tx - 0.3 * length * Math.sin(angle - 0.5);
    var p2y = ty - 0.3 * length * Math.cos(angle - 0.5);
    this.drawLine(fx, fy, tx - 0.1 * dx, ty - 0.1 * dy);
    this.beginPath();
    this.moveTo(tx, ty);
    this.lineTo(p1x, p1y);
    this.lineTo(p2x, p2y);
    this.closePath();
    this.fill();
  };

CanvasRenderingContext2D.prototype.drawToolTip = function(text, fx, fy, tx, ty) {
    this.drawLine(fx, fy, tx, ty);

    var fh = this.getFontHeight(); // font height
    var rh = fh + 5; // rectangle height
    var width = this.measureText(text).width + 10;
    this.fillRect(tx - width / 2, ty - rh, width, rh);
    this.strokeRect(tx - width / 2, ty - rh, width, rh);
    this.fillStyle = "#000000";
    this.fillText(text, tx, ty);
  };
